<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style>
			div{
				/*尺寸：高度;height    宽度width 单位px，em*/
			/*1em=16px*/
			height: 100px;
			width: 100px;
			background-color: #DDA0DD;
			color: #DDA0DD;
			font-size: 20px;
			text-align: center;/*水平居中*/
			}
			div:hover{
				background-color: ghostwhite;
				color: lightyellow;
				width:300px;
				height: 200px;
			}
			p{
				height: 50px;
				width: 50px;
				background-color: aquamarine;
			}
			p:active{
				background-color: plum;
				color: white;
			}
		</style>
	</head>
	<body>
		<!--
        	伪类选择器：能产生一些特殊的效果
        	hover:鼠标滑过标签
        	active：鼠标点击标签
        	link:链接未被访问
        	vistied:链接被访问后
        -->
        <div>hover</div>
        <p>active</p>
        	
        </div>
	</body>
</html>
